<script lang="ts" setup>
import { ref } from "vue";
import BHeader from "../../components/header/bHeader.vue";
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import UniPopup from "../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
import {goHome} from "../../tools/go"

const cartPopup = ref();
const cartCount = ref(0);
const totalPrice = ref(0);
const loadMoreStatus = ref("more");

const bannerList = ref([
  {
    image:
        "../../static/img/groupbuy/berry.jpg",
    title: "新鲜水果",
    id: 1,
  },
  {
    image:
        "../../src/static/img/groupbuy/berry.jpg",
    title: "社区团购",
    id: 2,
  }
]);

const productList = ref([
  {
    id: 1,
    name: "新鲜草莓 500g",
    price: 15.9,
    originalPrice: 19.9,
    image:
        "../../static/img/groupbuy/berry.jpg",
  },
  {
    id: 2,
    name: "有机蓝莓 1kg",
    price: 8.9,
    originalPrice: 12.9,
    image:
        "../../static/img/groupbuy/blue.jpg",
  },
  {
    id: 3,
    name: "新鲜橘子",
    price: 12.9,
    originalPrice: 15.9,
    image:
        "../..//static/img/groupbuy/orange.png",
  },
  {
    id: 4,
    name: "西红柿礼盒",
    price: 39.9,
    originalPrice: 49.9,
    image:
        "../..//static/img/groupbuy/xhs.png",
  },
]);

const cartList = ref([]);

const showCart = () => {
  cartPopup.value.open();
};

const addToCart = (product: any) => {
  const existingItem = cartList.value.find((item) => item.id === product.id);
  if (existingItem) {
    existingItem.quantity += 1;
  } else {
    cartList.value.push({
      ...product,
      quantity: 1,
    });
  }
  updateCart();
};

const increaseQuantity = (index: number) => {
  cartList.value[index].quantity += 1;
  updateCart();
};

const decreaseQuantity = (index: number) => {
  if (cartList.value[index].quantity > 1) {
    cartList.value[index].quantity -= 1;
  } else {
    cartList.value.splice(index, 1);
  }
  updateCart();
};

const updateCart = () => {
  cartCount.value = cartList.value.reduce(
      (sum, item) => sum + item.quantity,
      0,
  );
  totalPrice.value = cartList.value
      .reduce((sum, item) => sum + item.price * item.quantity, 0)
      .toFixed(2);
};

const clearCart = () => {
  cartList.value = [];
  updateCart();
  cartPopup.value.close();
};

const checkout = () => {
  if (cartCount.value === 0) {
    uni.showToast({
      title: "购物车为空",
      icon: "none",
    });
    return;
  }

  uni.showToast({
    title: "正在前往结算",
    icon: "success",
  });
};

const goToDetail = (id: number) => {
  uni.showToast({
    title: "查看商品详情",
    icon: "none",
  });
};

const loadMore = () => {
  loadMoreStatus.value = "loading";
  setTimeout(() => {
    loadMoreStatus.value = "noMore";
  }, 1000);
};
</script>

<template>

  <b-header title="社区团购" />

  <view class="back">
    <view class="page-container">
      <!-- 搜索栏 -->
      <view class="search-bar">
        <uni-icons type="search" size="20" color="#666"></uni-icons>
        <input
            type="text"
            placeholder="搜索商品"
            placeholder-class="placeholder"
        />
        <uni-icons type="scan" size="20" color="#666"></uni-icons>
      </view>

      <!-- 轮播图 -->
      <swiper
          class="banner"
          circular
          :indicator-dots="true"
          :autoplay="true"
          :interval="3000"
          :duration="1000"
      >
        <swiper-item
            v-for="(item, index) in bannerList"
            :key="index"
            class="banner-item"
        >
          <image :src="item.image" mode="aspectFill" class="banner-image" />
          <view class="banner-info">
            <text class="banner-title">{{ item.title }}</text>
            <text class="banner-tag">特惠</text>
          </view>
        </swiper-item>
      </swiper>

      <!-- 商品列表 -->
      <scroll-view scroll-y class="product-list" @scrolltolower="loadMore">
        <view class="product-grid">
          <view
              v-for="(product, index) in productList"
              :key="index"
              class="product-card cursor-pointer"
              @click="goToDetail(product.id)"
          >
            <image :src="product.image" mode="aspectFill" class="product-image" />
            <view class="product-info">
              <text class="product-name">{{ product.name }}</text>
              <view class="price-row">
                <text class="price">¥{{ product.price }}</text>
                <text class="original-price">¥{{ product.originalPrice }}</text>
              </view>
              <button
                  class="add-cart-btn cursor-pointer"
                  @click.stop="addToCart(product)"
              >
                <uni-icons type="plus" size="20" color="#ffffff"></uni-icons>
              </button>
            </view>
          </view>
        </view>
        <uni-load-more :status="loadMoreStatus" />
      </scroll-view>

      <!-- 购物车栏 -->
      <view class="cart-bar">
        <view class="cart-left cursor-pointer" @click="showCart">
          <view class="cart-icon">
            <uni-icons type="cart" size="24" color="#333"></uni-icons>
            <view v-if="cartCount > 0" class="cart-badge">{{ cartCount }}</view>
          </view>
          <view class="cart-price">
            <text>合计：</text>
            <text class="total-price">¥{{ totalPrice }}</text>
          </view>
        </view>
        <button class="checkout-btn cursor-pointer" @click="checkout">
          去结算
        </button>
      </view>

      <!-- 购物车弹窗 -->
      <uni-popup ref="cartPopup" type="bottom">
        <view class="cart-popup">
          <view class="cart-header">
            <text class="cart-title">购物车</text>
            <text class="clear-cart cursor-pointer" @click="clearCart">清空</text>
          </view>
          <scroll-view scroll-y class="cart-list">
            <view
                v-for="(item, index) in cartList"
                :key="index"
                class="cart-item"
            >
              <image
                  :src="item.image"
                  mode="aspectFill"
                  class="cart-item-image"
              />
              <view class="cart-item-info">
                <text class="cart-item-name">{{ item.name }}</text>
                <text class="cart-item-price">¥{{ item.price }}</text>
              </view>
              <view class="quantity-control">
                <text
                    class="quantity-btn cursor-pointer"
                    @click="decreaseQuantity(index)"
                >-</text
                >
                <text class="quantity">{{ item.quantity }}</text>
                <text
                    class="quantity-btn cursor-pointer"
                    @click="increaseQuantity(index)"
                >+</text
                >
              </view>
            </view>
          </scroll-view>
        </view>
      </uni-popup>
    </view>
  </view>
</template>



<style scoped lang="scss">
@use "../../static/css/main";

.back {
  @include main.useTheme() {
    page {
      height: 100%;
    }

    .page-container {
      display: flex;
      flex-direction: column;
      height: 100%;
      background-color: main.getVal("one_lv_bg_color");
    }

    .search-bar {
      display: flex;
      align-items: center;
      padding: 20rpx 30rpx;
      background-color: main.getVal("primary_bg_color");
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .search-bar input {
      flex: 1;
      height: 70rpx;
      background-color: main.getVal("two_lv_bg_color");
      border-radius: 35rpx;
      margin: 0 20rpx;
      padding: 0 20rpx;
      font-size: 14px;
    }

    .placeholder {
      color: #999999;
    }

    .banner {
      height: 300rpx;
      margin: 20rpx;
      border-radius: 16rpx;
      overflow: hidden;
    }

    .banner-item {
      position: relative;
    }

    .banner-image {
      width: 100%;
      height: 100%;
    }

    .banner-info {
      position: absolute;
      bottom: 20rpx;
      left: 20rpx;
      right: 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .banner-title {
      color: main.getVal("primary_text_color");
      font-size: 16px;
      font-weight: bold;
    }

    .banner-tag {
      background-color: #ff6b6b;
      color: main.getVal("primary_text_color");
      padding: 4rpx 16rpx;
      border-radius: 20rpx;
      font-size: 12px;
    }

    .product-list {
      flex: 1;
      overflow: auto;
    }

    .product-grid {
      display: flex;
      flex-wrap: wrap;
      padding: 20rpx;
    }

    .product-card {
      width: calc(50% - 20rpx);
      margin: 10rpx;
      background-color: main.getVal("primary_bg_color");
      border-radius: 16rpx;
      overflow: hidden;
    }

    .product-image {
      width: 100%;
      height: 300rpx;
    }

    .product-info {
      padding: 20rpx;
      position: relative;
    }

    .product-name {
      font-size: 14px;
      color: main.getVal("primary_text_color");
      line-height: 1.4;
      height: 80rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .price-row {
      margin-top: 16rpx;
      display: flex;
      align-items: center;
    }

    .price {
      color: #ff6b6b;
      font-size: 16px;
      font-weight: bold;
    }

    .original-price {
      color: #999999;
      font-size: 12px;
      text-decoration: line-through;
      margin-left: 12rpx;
    }

    .add-cart-btn {
      position: absolute;
      right: 20rpx;
      bottom: 20rpx;
      width: 60rpx;
      height: 60rpx;
      padding: 0;
      border-radius: 30rpx;
      background-color: #ff6b6b;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .cart-bar {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 100rpx;
      background-color: main.getVal("primary_bg_color");
      display: flex;
      align-items: center;
      padding: 0 30rpx;
      box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    }

    .cart-left {
      flex: 1;
      display: flex;
      align-items: center;
    }

    .cart-icon {
      position: relative;
      margin-right: 20rpx;
    }

    .cart-badge {
      position: absolute;
      top: -10rpx;
      right: -10rpx;
      background-color: main.getVal("two_lv_bg_color");
      color: main.getVal("primary_text_color");
      font-size: 12px;
      min-width: 32rpx;
      height: 32rpx;
      border-radius: 16rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 6rpx;
    }

    .cart-price {
      font-size: 14px;
      color: main.getVal("one_lv_text_color");
    }

    .total-price {
      color: #ff6b6b;
      font-weight: bold;
    }

    .checkout-btn {
      width: 200rpx;
      height: 80rpx;
      background-color: #ff6b6b;
      color: #ffffff;
      font-size: 16px;
      border-radius: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .cart-popup {
      background-color: main.getVal("primary_bg_color");
      border-radius: 30rpx 30rpx 0 0;
      padding: 30rpx;
      max-height: 70vh;
    }

    .cart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30rpx;
    }

    .cart-title {
      font-size: 16px;
      font-weight: bold;
      color: main.getVal("one_lv_text_color");
    }

    .clear-cart {
      color: #999999;
      font-size: 14px;
    }

    .cart-list {
      max-height: 60vh;
    }

    .cart-item {
      display: flex;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1px solid main.getVal("primary_border_color");
    }

    .cart-item-image {
      width: 120rpx;
      height: 120rpx;
      border-radius: 12rpx;
    }

    .cart-item-info {
      flex: 1;
      margin: 0 20rpx;
    }

    .cart-item-name {
      font-size: 14px;
      color: main.getVal("one_lv_text_color");
      margin-bottom: 10rpx;
    }

    .cart-item-price {
      color: #ff6b6b;
      font-size: 16px;
      font-weight: bold;
    }

    .quantity-control {
      display: flex;
      align-items: center;
    }

    .quantity-btn {
      width: 50rpx;
      height: 50rpx;
      background-color: main.getVal("one_lv_bg_color");
      border-radius: 25rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: #333333;
    }

    .quantity {
      margin: 0 20rpx;
      font-size: 14px;
      color: #333333;
    }

    .cursor-pointer {
      cursor: pointer;
    }
  }
}
</style>
